<template>
  <div class="coupon" style="position: relative;">
    <div class="spinner" v-if="$store.state.loadingFlag">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
      <div style="height: 100%;">
      <el-row class="a_top"
              style="text-align:left;border-bottom:1px solid #EBEBEB;height: 70px!important;background-color: rgba(255,255,255,1);">
        <el-col :span="24" style="height: 70px;position: relative;">
          <ul style="height: 100%;">
            <li class="carLi" style="font-weight: bold">投放纪录</li>
          </ul>
          <!--<div class="grid-content" style="color: #F58534;font-size: 18px;position: absolute;top:0;">推广列表</div>-->
        </el-col>
      </el-row>
      <el-row class="c_menu txt search">
        <el-col :span="7" style="padding-left: 35px;">
          <div class="heig75">
            <span class="span1">名称/券码：</span>
            <el-input v-model="couponName" placeholder="卡券名称"
                      style="width: 40%;" class="couponName"></el-input>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="heig75">
            <span class="span1" style="text-align: center;padding-left: 8px;">券类型：</span>
            <el-select v-model="couponType" placeholder="全部" class="y_select inputC"
                       style="width: 40%;">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="heig75">
            <span>领取时间：</span>
            <el-date-picker
              style="width: 30%;"
              v-model="drawStartTime"
              type="date"
              placeholder="选择日期范围" id="c_input1"
              :picker-options="pickerOptions0">
            </el-date-picker>
            <span style="font-size: 14px;color:#656D78;display: inline-block;margin-left: 5px; ">&nbsp; —　</span>
            <el-date-picker
              style="width: 30%;"
              v-model="drawEndTime"
              type="date"
              placeholder="选择日期范围" id="c_input2"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </div>
        </el-col>

        <el-col :span="7" style="padding-left: 35px;">
          <div class="heig75">
            <span class="span1">商家名称：</span>
            <el-input v-model="storeName" placeholder="商家名称"
                      style="width: 40%;" class="inputC"></el-input>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="heig75">
            <span class="span1">使用状态：</span>
            <el-select v-model="throwingState" placeholder="全部" class="y_select inputC"
                       style="width: 40%;">
              <el-option
                v-for="item in Delivery_state"
                :key="item.value"
                :label="item.typeName"
                :value="item.typeId">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="heig75">
            <span>使用时间：</span>
            <el-date-picker
              style="width: 30%;"
              v-model="useStartTime"
              type="date"
              placeholder="选择日期范围" id="c_input1"
              :picker-options="pickerOptions0">
            </el-date-picker>
            <span style="font-size: 14px;color:#656D78;display: inline-block;margin-left: 5px; ">&nbsp; —　</span>
            <el-date-picker
              style="width: 30%;"
              v-model="useEndTime"
              type="date"
              placeholder="选择日期范围" id="c_input2"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </div>
        </el-col>

        <el-col :span="7" style="padding-left: 35px;">
          <div class="heig75">
            <span class="span1">用户手机：</span>
            <el-input v-model="userPhone" placeholder="手机号码"
                      style="width: 40%;" class="inputC"></el-input>
          </div>
        </el-col>
        <el-col :span="7">
        <div class="heig75">
          <span class="span1" style="padding-left: 8px;">结算类型：</span>
          <el-select v-model="settleStatus" placeholder="全部" class="y_select inputC"
                     style="width: 40%;">
            <el-option
              v-for="item in settleStatusArr"
              :key="item.value"
              :label="item.typeName"
              :value="item.typeId">
            </el-option>
          </el-select>
        </div>
        </el-col>
        <el-col :span="10">
          <div class="heig75">
            <el-button type="primary" style="width: 80px;" @click="resetData">重置</el-button>
            <el-button type="primary" style="width: 80px;" @click="query_">查询</el-button>
            <el-button type="primary" style="width: 80px;" @click="settle">结算</el-button>
            <el-button type="primary" style="width: 100px;" @click="xzExcel_">导出excel</el-button>
            <!--<el-button type="primary" style="width: 80px;" @click="xzExcel">导出</el-button>-->
          </div>
        </el-col>

      </el-row>
      <div class="centerBox">
        <div class="" style="text-align:left!important; color:#fff;font-size: 14px;">
          <el-row class="top" :style="screenWidth<1367?'padding-right: 26px;':'padding-right: 13px;'">
            <el-col :span="2">
              <div class="grid-content textAl_center" style="cursor: pointer;" >
                <span v-if="qxFlag" @click="allSet">全选</span>
                <span v-if="!qxFlag" @click="cancelSet">取消全选</span>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">券码</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">券类型</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">卡券名称</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">领取时间</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">用户手机</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content textAl_center">使用状态</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">使用时间</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content textAl_center">使用商家</div>
            </el-col>
          </el-row>
        </div>
        <div class="content" id="content" :style="screenWidth<1367?'height: 70%;':'height:90%;'">
          <div id="lastList" >
            <el-row class="c_lastList elw" v-for="(item,index) in carList" :key="index"
                    :style="(index%2==0)?'background-color: rgba(236,238,242,1);':''">
              <el-col :span="2" >
                <div class="grid-content textAl_center">
                  <el-checkbox-group v-model="checkList1" id="noneF">
                    <el-checkbox :label="item.wxCardCode" :disabled="item.status==6||item.status<5||item.setleStatus==1||item.cardTypeCode==5"></el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center">{{item.wxCardCode?item.wxCardCode:'&nbsp;'}}</div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content textAl_center" v-if="item.cardTypeCode==2">代金券</div>
                <div class="grid-content textAl_center" v-if="item.cardTypeCode==3">折扣券</div>
                <div class="grid-content textAl_center" v-if="item.cardTypeCode==5">普通券</div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center">{{item.title?item.title:'&nbsp;'}}</div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center">{{item.addDate|Time}}</div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center" v-if="item.phone!='undefined'">{{item.phone?item.phone:"&nbsp;"}}</div>
                <div class="grid-content textAl_center" v-if="item.phone=='undefined'">&nbsp;</div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content textAl_center" v-if="item.status==4">未使用</div>
                <div class="grid-content textAl_center" v-if="item.status==5">已使用</div>
                <div class="grid-content textAl_center" v-if="item.status==6">已过期</div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center" v-if="item.consumeMerchantId">{{item.consumeDate|Time}}</div>
                <!--<div class="grid-content textAl_center" v-if="!item.consumeDate">&nbsp;</div>-->
              </el-col>
              <el-col :span="3">
                <div class="grid-content textAl_center" v-if="item.consumeMerchantName">{{item.consumeMerchantName}}</div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <el-dialog style="text-align: center;position: absolute;" :visible.sync="dialogVisible" size="tiny" :modal="false"
                 :close-on-click-modal="false">
        <span style="font-size: 14px;color: rgba(89,115,128,1)">{{dialogData}}</span>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false" class="cp_qx">取 消</el-button>
                  <el-button v-if="dialog=='delete'" type="primary" @click="del_coupon(couponTypeId,couponId)"
                             class="cp_qd">确 定</el-button>
                  <el-button v-if="dialog=='delivery'" type="primary" @click="delivery(couponTypeId,couponId)"
                             class="cp_qd">确 定</el-button>
                </span>
      </el-dialog>

      <div class="block">
        <el-pagination
          style="float: right;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout=" prev, pager, next"
          :total="pageTotal*10">
        </el-pagination>
        <div style="float: right;">
          <span style="margin-top: 6px;display: inline-block">共 {{pageTotal}} 页</span>
          <span style="margin-left: 20px;margin-top: 10px;">共计 {{sumNumber}} 条</span>
        </div>
      </div>
    </div>
    <!--<div style="width: 500px;height: 200px;background-color: #fff;position: absolute;left: 0;top: 0;z-index: 10000">-->
    <!--<div></div>-->
    <!--<div >-->
    <!--<el-button type="primary" style="width: 80px;" @click="goBack">返 回</el-button>-->
    <!--<el-button type="primary" style="width: 80px;" @click="saveCoupon">保 存</el-button>-->
    <!--</div>-->
    <!--</div>-->
    <el-dialog style="text-align: center;position: absolute;" :visible.sync="dialogVisibleE" size="tiny" :modal="false"
               :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">{{dialogDataE}}</span>
      <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisibleE = false" class="cp_qx">确 定</el-button>
                </span>
    </el-dialog>

    <el-dialog style="text-align: center;position: absolute;" :visible.sync="dialogVisible1" size="tiny" :modal="false"
               :close-on-click-modal="false">
      <span style="font-size: 14px;color: rgba(89,115,128,1)">确定标记为已结算？</span>
      <span slot="footer" class="dialog-footer">
           <el-button @click="dialogVisible1 = false" class="cp_qx">取 消</el-button>
           <el-button @click="settlement" class="cp_qx">确 定</el-button>
                </span>
    </el-dialog>


    <div class="mask" v-if="dialogVisibleE">

    </div>
    <div class="mask" v-if="dialogVisible1">

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
//        dialogVisibleL:false,
        dialogVisible1:false,
        qxFlag:true,
        checkList1:[],
        checkList2:[],
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() >= Date.now() ;
          }
        },
        dialogVisibleE:false,
        dialogDataE:"",
        screenWidth: document.body.clientWidth,
        dialogVisible: false,
        dialogData: "",
        dialog: "",
        couponName: "",
        couponType: "",
        drawStartTime: "",
        drawEndTime: "",
        storeName: "",
        throwingState: "",
        useStartTime: "",
        useEndTime: "",
        userPhone: "",
        options1: [
          {type:2, typeId: "2",typeName:'代金券'}
        ],
        Delivery_state: [
          {type: 0, typeId: "0", typeName: "全部"},
          {type: 4, typeId: "4", typeName: "未使用"},
          {type: 5, typeId: "5", typeName: "已使用"},
          {type: 6, typeId: "6", typeName: "已过期"},
        ],
        settleStatus:"",
        settleStatusArr:[
          {type: 2, typeId: "2", typeName: "全部"},
          {type: 0, typeId: "0", typeName: "未结算"},
          {type: 1, typeId: "1", typeName: "已结算"},
        ],
        currentPage: 0,
        pageTotal: 0,
        sumNumber: 0,
        page: 0,
        input: "",
        heightFlag: false,
        belowHeight: '',
        carList:[]
      }
    },
    watch:{
     couponName(value,oldValue){
        if(oldValue&&value.length == 0){
          this.query_()
        }
      },
      storeName(value,oldValue){
        if(oldValue&&value.length == 0){
          this.query_()
        }
      },
      checkList1(value){
        let arr = []
        this.carList.forEach((item) => {
          if(item.status==5&&item.setleStatus!=1&&item.cardTypeCode!=5) {
            arr.push(item.wxCardCode);
          }
        });
        if(value.length==arr.length&&value.length) this.qxFlag = false
        if(value.length!=arr.length) this.qxFlag = true
      },
    },
    mounted () {
      let contentHeight = document.getElementById('content').offsetHeight
      let lastListHeight = document.getElementById('lastList').offsetHeight
      if (lastListHeight > contentHeight) {
        this.heightFlag = true
      } else {
        this.heightFlag = false
      }
    },
    methods: {
      xzExcel_(){
        let path = ``
        this.cancelSet()
        let drawStartTime = this.coverTimer(this.drawStartTime + "");
        let drawEndTime = this.coverTimer(this.drawEndTime + "");
        let useStartTime = this.coverTimer(this.useStartTime + "");
        let useEndTime = this.coverTimer(this.useEndTime + "");
        if(Date.parse(drawStartTime)>Date.parse(drawEndTime)){
          this.dialogVisibleE = true
          this.dialogDataE = '开始时间不能大于结束时间'
          return
        }
        if(Date.parse(useStartTime)>Date.parse(useEndTime)){
          this.dialogVisibleE = true
          this.dialogDataE = '开始时间不能大于结束时间'
          return
        }
        if (this.couponName) path += `&cardTitle=${this.couponName}`
        if (this.couponType) path += `&cardType=${this.couponType}`
        if (this.drawStartTime) path += `&addStartTime=${drawStartTime}`
        if (this.drawEndTime) path += `&addEndTime=${drawEndTime}`
        if (this.storeName) path += `&merchantName=${this.storeName}`
        if (this.throwingState) path += `&status=${this.throwingState}`
        if (this.useStartTime) path += `&consumeStartTime=${useStartTime}`
        if (this.useEndTime) path += `&consumeEndTime=${useEndTime}`
        if (this.userPhone) path += `&phone=${this.userPhone}`
//        if(this.settleStatus)
        let settleStatus1 = ''
        if(this.settleStatus=='全部'||!this.settleStatus){
          settleStatus1=2
        }else {
          settleStatus1=this.settleStatus
        }
        window.open(`${this.$store.state.path}cards/records/export?storeId=${this.$store.state.storeId}&page=${this.page}&size=10&settleStatus=${settleStatus1}${path}`)
      },
      settlement(){
        this.checkList2 = []
        this.carList.forEach((item) => {
          this.checkList1.forEach((item1) => {
              if(item1==item.wxCardCode){
                this.checkList2.push(item.wxCardId)
              }
          });
        });
        this.$store.state.loadingFlag = true
        let checkList1 =  this.checkList1.join(",")
        let checkList2 =  this.checkList2.join(",")
        let jsonData = {
          'codes':checkList1,
          'cardIds':checkList2,
        }
        this.$http.put(`${this.$store.state.path}cards/settle/usercards?storeId=${this.$store.state.storeId}&communityId=${this.$store.state.storeId}`,jsonData)
          .then(res => {
            this.dialogVisible1 = false
            this.query_();
            if(!res.body.result){
                this.dialogVisibleE = true
                this.dialogDataE = res.body.msg
                return
            }
          }, res => {
            this.$store.state.loadingFlag = false
          })
      },
      settle(){
        if(!this.checkList1.length){
          this.dialogVisibleE = true
          this.dialogDataE = '请选择需要结算的卡券'
          return
        }
        this.dialogVisible1=true
      },
      allSet(){
        this.checkList1= []
        this.carList.forEach((item) => {
          if(item.status==5&&item.setleStatus!=1&&item.cardTypeCode!=5) this.checkList1.push(item.wxCardCode);
        });
        if(this.checkList1.length==0){
            this.dialogVisibleE = true
            this.dialogDataE = '没有找到符合条件的内容！'
            return
        }
      },
      cancelSet(){
        this.checkList1= []
        this.qxFlag = true
      },
      resetData(){
        this.couponName=this.couponType=this.drawStartTime=this.drawEndTime='';
        this.storeName=this.throwingState=this.useStartTime=this.useEndTime=this.settleStatus=this.userPhone='';
        this.query_();
      },
      query_(){
        let path = ``
        this.cancelSet()
        let drawStartTime = this.coverTimer(this.drawStartTime + "");
        let drawEndTime = this.coverTimer(this.drawEndTime + "");
        let useStartTime = this.coverTimer(this.useStartTime + "");
        let useEndTime = this.coverTimer(this.useEndTime + "");
        if(Date.parse(drawStartTime)>Date.parse(drawEndTime)){
            this.dialogVisibleE = true
            this.dialogDataE = '开始时间不能大于结束时间'
          return
        }
        if(Date.parse(useStartTime)>Date.parse(useEndTime)){
          this.dialogVisibleE = true
          this.dialogDataE = '开始时间不能大于结束时间'
          return
        }
        if (this.couponName) path += `&cardTitle=${this.couponName}`
        if (this.couponType) path += `&cardType=${this.couponType}`
        if (this.drawStartTime) path += `&addStartTime=${drawStartTime}`
        if (this.drawEndTime) path += `&addEndTime=${drawEndTime}`
        if (this.storeName) path += `&merchantName=${this.storeName}`
        if (this.throwingState) path += `&status=${this.throwingState}`
        if (this.useStartTime) path += `&consumeStartTime=${useStartTime}`
        if (this.useEndTime) path += `&consumeEndTime=${useEndTime}`
        if (this.userPhone) path += `&phone=${this.userPhone}`
//        if(this.settleStatus)
        let settleStatus1 = ''
        if(this.settleStatus=='全部'||!this.settleStatus){
          settleStatus1=2
        }else {
          settleStatus1=this.settleStatus
        }

       this.$store.state.loadingFlag = true
        this.carList = []
        this.$http.get(`${this.$store.state.path}cards/records?storeId=${this.$store.state.storeId}&page=${this.page}&size=10&settleStatus=${settleStatus1}${path}`)
          .then(res => {
            this.$store.state.loadingFlag = false
            if (res.body.resultCode!='0000'||!res.body.result){
              this.carList = []
              this.sumNumber = 0
              this.pageTotal = 0
            }
            if (res.body.resultCode=='0000'){
              this.carList =res.body.result.result
              this.sumNumber = res.body.result.sumNumber;
              this.pageTotal = res.body.result.totalPage;
            }
          }, res => {
            this.$store.state.loadingFlag = false
          })
      },
      handleSelect(val){
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
        this.page=val-1;
        this.query_()

      },
    },
    created(){
        this.query_()
    },
  }
</script>
<style scoped>
  .coupon .iconfont {
    font-size: 14px !important;
  }
  #noneF{
    color: whitesmoke;
  }

  #app .aside {
    z-index: 500;
  }

  #app .coupon .mask {
    z-index: 501;
  }

  .coupon .cp_qx {
    background-color: #57BDDE!important;
    border-color: #57BDDE !important;
    color: #fff;
  }

  .coupon .cp_qx:hover {
    background-color:#57BDDE!important;
    border-color: #57BDDE!important;
    color: #fff;
  }

  /*.coupon .cp_qd:hover{*/
  /*background: #4db3ff!important;*/
  /*border-color: #4db3ff!important;*/
  /*color: #fff;*/
  /*}*/

  .coupon {
    background-color: #f8f9f9;
    width: 100%;
    height: 100%;
    padding-left: 200px;
    /*margin-left: 220px;*/
    /*padding-right: 220px;*/
  }

  .coupon .centerBox {
    margin: 20px 20px 0;
    border: 1px solid rgba(4, 4, 4, 0.09);
    border-bottom: 2px solid rgba(4, 4, 4, 0.09);
    border-radius: 5px;
    height:55%;
    overflow: hidden;
  }

  .coupon .centerBox .content {
    margin: 0;
    height: 90%;
    overflow-y: auto;
    overflow-x: hidden;
    padding:14px 13px;
    background-color:#fff;
  }

  .coupon .centerBox .top {
    overflow: hidden;
    background-color: rgba(87, 189, 222, 1);
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    padding:0 13px;
  }

  .coupon .span1 {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px;
    color: rgba(89, 115, 128, 1)
  }

  .coupon .search {
    margin: 20px 20px 0 20px;
    height: 200px;
    color: #656D78;
    border: 1px solid rgba(4, 4, 4, 0.09);
    border-bottom: 2px solid rgba(4, 4, 4, 0.09);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
  }

  .coupon .el-button--primary {
    color: #fff;
    background-color: rgba(87, 189, 222, 1) !important;
    border-color: rgba(87, 189, 222, 1) !important;
  }

  .colorLan {
    color: rgba(0, 191, 232, 1);
  }

  .colorChen {
    color: rgba(255, 135, 97, 1);
  }

  .colorZC {
    color: rgba(111, 124, 130, 1);
  }

  .colorZH {
    color: rgba(123, 107, 102, 1);
  }

  .coupon .sonSpan span {
    margin-left: 5px;
  }

  .carLi {
    width: 150px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    border-right: 1px solid rgb(235, 235, 235);
    cursor: pointer;
    color: rgba(89, 115, 128, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    /*background-color: rgba(4,4,4,0.09);*/
  }

  .elw {
    overflow: hidden;
    color: rgba(89, 115, 128, 1);
    font-size: 12px;
    text-align: left !important;
    height:40px;
    line-height:40px;
    border-radius: 5px;
  }

  .coupon {
    /*margin: 30px 60px 0 60px;*/
  }

  .heig75 {
    height: 65px;
    line-height: 65px;
  }

  .coupon .el-pager li.active {
    /*border-color: #F58534 !important;*/
    background-color: #F58534 !important;
  }

  .coupon > .menu {
    /*margin-right: -20px!important;*/
  }

  .coupon .txt-size {
    font-size: 14px;
  }

  .a_top {
    width: 100% !important;
    height: 40px !important;
    margin-left: 0 !important;
    position: relative;
  }

  .a_top .grid-text {
    font-size: 18px;
    color: #545558;
  }

  .primary > span {
    font-size: 14px !important;
  }

  .coupon .el-pager li.active {
    border-color: #1dabd9 !important;
    background-color: #1dabd9 !important;
  }

  .icon-xiugai {
    font-size: 12px !important;
    color: #EF6B0C !important;
  }

  .el-button--primary:focus, .el-button--primary:hover {
    background-color: #1dabd9 !important;
    border-color: #1dabd9 !important;
  }

  .coupon .el-button--info, .coupon .el-button--primary {
    color: #fff;
    background-color: rgba(87, 189, 222, 1);
    border-color: rgba(87, 189, 222, 1);
  }

  .el-button--info:focus, .el-button--info:hover {
    background-color: #1dabd9 !important;
    border-color: #1dabd9 !important;
  }


</style>
